html
    head
        meta(http-equiv='Content-Type',content='text/html;charset=utf-8')
        script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.dev.js')
        script(src='https://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js')
        style.
            *{
                margin:0px;
                border:0px;
                padding:0px;
                font-size:16px;
                color:white;
            }
            
            body{
                overflow:hidden;
            }
            
            .label,.txt,.btn{
                padding:5px;
            }

            .w80{
                width:80%;
            }
            
            .w10{
                width:10%;
            }
            
            .w100{
                width:100%;
            }
            
            .h100{
                height:100%;
            }
            
            .h90{
                height:90%;
            }
            
            .h10{
                height:10%;
            }
            
            .w5{
                width:5%;
            }
            
            .h10{
                height:10%;
            }
            
            .os{
                overflow:scroll;
            }
            
            .fl{
                float:left;
            }
            
            .cb{
                clear:both;
            }
            
            .pf{
                position:fixed;
            }
            
            .pa{
                position:absolute;
            }
            
            a{
                text-decoration:none;
            }
            
            .dib{
                display:inline-block;
            }
            
            .db{
                display:block;
            }
            
            .dn{
                display:none;
            }
            
            #mnuBtn{
                border-left:1px solid white;
            }
            
            /*灰黑色*/
            .colorb{
                background:rgb(23,44,60);
            }
            
            /*灰蓝色*/
            .colorg{
                background:rgb(39,72,98);
            }
            
            /*砖红色*/
            .colorr{
                background:rgb(153,80,84);
            }
            
            /*橘红色*/
            .coloro{
                background:rgb(217,104,49);
            }
            
            /*淡黄色*/
            .colory{
                background:rgb(230,179,61);
            }
            
            .tab{
                left:0px;
                top:25px;
                padding:5px;
            }
            
            #menuTab{
                bottom:10%;
                right:0px;
                width:20%;
                height:90%;
                border-bottom:1px solid white;
                border-top:1px solid white;
            }
            
            #menuTab>ul{
                height:25px;
            }
            
            #menuTab>ul>li{
                height:100%;
                width:33%;
                text-align:center;
                line-height:25px;
                border-left:1px solid white;
                border-bottom:1px solid white;
            }
            
            #menuTab>ul>li:first-child{
                border-left:none;
            }
            
            ul li{
                list-style:none;
            }
    body
        form
            #menuTab.pf.coloro
                ul.w100
                    li.fl
                        input#rolBtn.w100.btn.h100.coloro(type='button',value='个人信息')
                    li.fl 
                        input#linBtn.w100.btn.h100.coloro(type='button',value='在线信息')
                    li.fl
                        input#romBtn.w100.btn.h100.coloro(type='button',value='房间信息')
                #tabContent.w100.coloro
                    #roleInfo.tab.pa
                        input#nikInp.txt.coloro(type='text',placeHolder='请在这里输入昵称')
                        input#romInp.txt.coloro(type='text',placeHolder='请在这里输入房间号')
                    #onlineInfo.tab.pa.dn
                        ul
                    #roomInfo.tab.pa.w100.dn
                        ul
            #msgBox.h90.os.colorb
            .h10
                input#msgInp.w80.txt.h100.colorg(type='text')
                input#subBtn.w10.btn.h100.colorr(type='button',value='发送信息')
                input#mnuBtn.w10.btn.h100.colorr(type='button',value='菜单')
                script.
                    var msgBox=$('#msgBox')[0];
                    var msgInp=$('#msgInp')[0];
                    var subBtn=$('#subBtn')[0];
                    var mnuBtn=$('#mnuBtn')[0];
                    
                    var rolBtn=$('#rolBtn')[0];
                    var linBtn=$('#linBtn')[0];
                    var romBtn=$('#romBtn')[0];

                    var nikInp=$('#nikInp')[0];
                    var romInp=$('#romInp')[0];
                    
                    var tempRoleInfo=getRoleInfo();
                    var socket=io.connect();

                    //接受消息
                    socket.on('message',function(data){
                        appendMsgBox(data);
                    });
                    
                    //刷新在线信息
                    socket.on('refreshNicks',function(data){
                        refreshOnline(data);
                    });
                    
                    //刷新房间信息
                    socket.on('refreshRooms',function(data){
                        refreshRooms(data);
                    });
                    
                    //发送消息
                    function sendMsg(){
                        var msg=msgInp.value.trim();
                        if(msg.length===0){
                            return;
                        }

                        if(tempRoleInfo.nick.length===0 || tempRoleInfo.room.length===0){
                            return;
                        }
                        
                        var message=tempRoleInfo.nick+'>>'+msg;
                        tempRoleInfo.message=message;
                        appendMsgBox(message);
                        socket.emit('message',tempRoleInfo);
                        msgInp.value='';
                    }

                    //修改昵称
                    nikInp.addEventListener('change',function(event){
                        var roleInfo=getRoleInfo();
                        if(roleInfo.nick.length===0||roleInfo.room.length===0){
                            return;
                        }
                        
                        roleInfo.nickOld=tempRoleInfo.nick;
                        roleInfo.nickNew=roleInfo.nick;
                        socket.emit('changeNick',roleInfo)
                        tempRoleInfo=getRoleInfo();
                    });
                    
                    //修改房间
                    romInp.addEventListener('change',function(event){
                        var roleInfo=getRoleInfo();
                        if(roleInfo.nick.length===0||roleInfo.room.length===0){
                            return;
                        }
                        
                        msgBox.innerHTML='';
                        socket.emit('leaveRoom',tempRoleInfo)
                        socket.emit('joinRoom',roleInfo)
                        tempRoleInfo=getRoleInfo();
                    });
                    
                    //获取当前的个人信息（昵称和房间号）
                    function getRoleInfo(){
                        var nick=nikInp.value.trim();
                        var room=romInp.value.trim();
                        return {nick:nick,room:room};
                    }
                    
                    //显示新的消息
                    function appendMsgBox(message){
                        var msg=document.createElement('p');
                        msg.innerText=message;
                        msgBox.appendChild(msg);
                        msg.scrollIntoView();
                    }
                    
                    //刷新在线一览
                    function refreshOnline(nicks){
                        var onlineInfoUl=$('#onlineInfo>ul')[0];
                        onlineInfoUl.innerHTML='';
                        for(var i=0;i<nicks.length;i++){
                            addLi(onlineInfoUl,nicks[i]);
                        }
                    }
                    
                    //刷新房间一览
                    function refreshRooms(rooms){
                        var roomInfoUl=$('#roomInfo>ul')[0];
                        roomInfoUl.innerHTML='';
                        for(var i=0;i<rooms.length;i++){
                            addLi(roomInfoUl,rooms[i]);
                        }
                    }
                    
                    //向列表中添加元素
                    function addLi(ul,text){
                        var li=document.createElement('li');
                        li.innerText=text;
                        ul.appendChild(li);
                    }
                    
                    //点击发送消息按钮，发送消息
                    subBtn.addEventListener('click',function(event){
                        event.preventDefault();
                        sendMsg();
                    });
                    
                    //Enter键发送信息
                    window.addEventListener('keypress',function(event){
                        if(event.keyCode===13){
                            sendMsg();
                        }
                    });

                    //鼠标点击消息显示区域，则隐藏菜单栏
                    msgBox.addEventListener('click',function(event){
                        menuVisible=false;
                        hideMenu();
                    });
                    
                    //点击菜单按钮，切换菜单栏显示状态
                    var menuVisible=true;
                    mnuBtn.addEventListener('click',function(event){
                        if(menuVisible){
                            hideMenu();
                        }else{
                            showMenu();
                        }
                        menuVisible=!menuVisible;
                    });

                    //默认Tab页为个人信息        
                    rolBtn.classList.add('colory');
                    
                    //点击个人信息按钮，显示个人信息
                    rolBtn.addEventListener('click',function(event){
                        showRoleTab();
                        hideOnlineTab();
                        hideRoomTab();
                        rolBtn.classList.add('colory');
                        linBtn.classList.remove('colory');
                        romBtn.classList.remove('colory');
                    });
                    
                    //点击在线信息按钮，显示在线信息
                    linBtn.addEventListener('click',function(event){
                        hideRoleTab();
                        showOnlineTab();
                        hideRoomTab();
                        rolBtn.classList.remove('colory');
                        linBtn.classList.add('colory');
                        romBtn.classList.remove('colory');
                    });
                    
                    //点击房间信息按钮，显示房间信息
                    romBtn.addEventListener('click',function(event){
                        hideRoleTab();
                        hideOnlineTab();
                        showRoomTab();
                        rolBtn.classList.remove('colory');
                        linBtn.classList.remove('colory');
                        romBtn.classList.add('colory');
                    });
                    
                    //显示个人信息
                    function showRoleTab(){
                        var roleTab=$('#roleInfo')[0];
                        roleTab.classList.remove('dn');
                    }

                    //隐藏个人信息
                    function hideRoleTab(){
                        var roleTab=$('#roleInfo')[0];
                        roleTab.classList.add('dn');
                    }
                    
                    //显示在线信息
                    function showOnlineTab(){
                        var onlineTab=$('#onlineInfo')[0];
                        onlineTab.classList.remove('dn');
                    }
                    
                    //隐藏在线信息
                    function hideOnlineTab(){
                        var onlineTab=$('#onlineInfo')[0];
                        onlineTab.classList.add('dn');
                    }
                    
                    //显示房间信息
                    function showRoomTab(){
                        var roomTab=$('#roomInfo')[0];
                        roomTab.classList.remove('dn');
                    }
                    
                    //隐藏房间信息
                    function hideRoomTab(){
                        var roomTab=$('#roomInfo')[0];
                        roomTab.classList.add('dn');
                    }

                    //显示菜单
                    function showMenu(){
                        var menuTab=$('#menuTab')[0];
                        menuTab.classList.remove('dn');
                    }
                    
                    //隐藏菜单
                    function hideMenu(){
                        var menuTab=$('#menuTab')[0];
                        menuTab.classList.add('dn');
                    }